<template>
  <div class="leaderboard-page">
    <!-- 比赛信息 -->
    <div class="contest-info">
      <h2>{{ contest.name }} - 排行榜</h2>
      <p>开始时间: {{ formatDate(contest.startTime) }}</p>
      <p>结束时间: {{ formatDate(contest.endTime) }}</p>
    </div>

    <!-- 排行榜表格 -->
    <el-table :data="leaderboard" style="width: 100%; margin-top: 20px"         :header-cell-style="{ 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }">
      <el-table-column label="排名" type="index" width="80"></el-table-column>
      <el-table-column
        label="用户名"
        prop="username"
        width="150"
      ></el-table-column>
      <el-table-column
        label="解决题目数量"
        prop="solvedCount"
        width="150"
      ></el-table-column>
      <el-table-column
        label="总耗时"
        prop="totalTime"
        width="120"
        :formatter="formatTime"
      ></el-table-column>

      <!-- 动态生成每道题目的完成情况列 -->
      <template v-for="(problem, index) in problems" :key="problem.problemId">
        <el-table-column
          :label="'题目 ' + (index + 1)"
          :prop="'problem_' + problem.problemId"
        >
          <template #default="{ row }">
            <el-tag :type="row['problem_' + problem.problemId]?.isAC ? 'success' : 'danger'">
            {{
                row['problem_' + problem.problemId]?.isAC
                ? `✔ 已解决 提交次数: ${row['problem_' + problem.problemId]?.submitCount || 0}`
                : `❌ 提交次数: ${row['problem_' + problem.problemId]?.submitCount}`
            }}
            </el-tag>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 返回按钮 -->
    <el-button type="default" @click="goBack" style="margin-top: 20px"
      >返回</el-button
    >
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import {
  ElMessage,
  ElTable,
  ElTableColumn,
  ElButton,
  ElTag,
} from "element-plus";
import request from "@/utils/request";

export default {
  data() {
    return {
      contest: {}, // 比赛信息
      leaderboard: [], // 排行榜数据
      problems: [], // 所有题目列表
    };
  },
  mounted() {
    const contestId = this.$route.params.id; // 从路由中获取比赛ID
    this.fetchContestDetails(contestId); // 获取比赛详情
    this.fetchProblems(contestId); // 获取所有题目列表

  },
  methods: {
    // 获取比赛详情
    fetchContestDetails(contestId) {
      request
        .get(`/contest/selectById?id=${contestId}`)
        .then((res) => {
          if (res && res.data) {
            this.contest = res.data;
            this.fetchLeaderboard(contestId); // 获取排行榜数据
          }
        })
        .catch((error) => {
          ElMessage.error("加载比赛详情失败");
        });
    },

    // 获取所有题目
    fetchProblems(contestId) {
      request
        .get(`/contest/${contestId}/questions`)
        .then((res) => {
          if (res && res.data) {
            this.problems = res.data;
          }
        })
        .catch((error) => {
          ElMessage.error("加载题目列表失败");
        });
    },

    // 获取排行榜数据
    fetchLeaderboard(contestId) {
      request
        .get(`/contest/selectAllSubmissionByContestId/${contestId}`)
        .then((res) => {
          if (res && res.data) {
            this.leaderboard = res.data;
            this.processLeaderboard(); // 处理排行榜数据
          }
        })
        .catch((error) => {
          ElMessage.error("加载排行榜数据失败");
        });
    },

    // 处理排行榜数据，获取每个用户的解决题目数量、总耗时、每道题的完成情况
    async processLeaderboard() {
      const startTime = this.contest.startTime; // 获取比赛开始时间

      for (let user of this.leaderboard) {
        let solvedCount = 0;
        let totalTime = 0;
        user.problems = [];

        // 初始化每道题目的字段，避免在渲染时出现 undefined
        for (let problem of this.problems) {
          // 默认值确保每个问题都有数据，即使用户未提交该题
          user[`problem_${problem.problemId}`] = {
            isAC: false,
            submitCount: 0,
            timeUsage: -1,
          };

          const result = await request.get(
            `/contest/selectAllSubmission/${this.contest.id}/${problem.problemId}/${user.id}`,
            {
              params: { startTime },
            }
          );
          const { submitTimes, timeUsage } = result.data;

          // 更新每个问题的完成情况
          const isAC = timeUsage !== -1; // 判断是否AC
          user[`problem_${problem.problemId}`] = {
            isAC,
            submitCount: submitTimes || 0,
            timeUsage: isAC ? timeUsage : -1, // -1表示未AC
          };

          // 统计解决题目数量和总耗时
          if (isAC) {
            solvedCount++;
            totalTime += timeUsage;
          }
        }

        // 添加解决题目数量和总耗时字段
        user.solvedCount = solvedCount;
        user.totalTime = totalTime;
      }

      // 排序：先按解决题目数量，从多到少；如果相同，按总耗时从少到多
      this.leaderboard.sort((a, b) => {
        if (b.solvedCount === a.solvedCount) {
          return a.totalTime - b.totalTime; // 总耗时少的排前面
        }
        return b.solvedCount - a.solvedCount; // 解决题目多的排前面
      });
    },

    // 格式化日期时间
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString();
    },

    // 格式化时间：秒数转化为 "小时:分钟" 格式
    formatTime(timeInSeconds) {
      if (timeInSeconds.totalTime === -1) return "-";
      const hours = Math.floor(timeInSeconds.totalTime / 3600);
      const minutes = Math.floor((timeInSeconds.totalTime % 3600) / 60);

      // 返回格式 "小时:分钟" 或 "小时:分钟:秒"
      return `${hours}小时 ${minutes}分钟`;
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.leaderboard-page {
  padding: 20px;
}

.contest-info {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}

.problem-tag {
  display: inline-block;
  margin: 5px;
}
</style>
